<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>兴天下视频门禁系统</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
	<script>
		/*大屏*/
		//自调用函数
		(function(){
			// 1、页面一加载就要知道页面宽度计算
			function setFont() {
			    // 因为要定义变量可能和别的变量相互冲突，污染，所有用自调用函数
			    var html = document.documentElement;// 获取html
			    // 获取宽度
			    var width = html.clientWidth;
			
			    // 判断
			    if (width < 1024) width = 1024
			    if (width > 1920) width = 1920
			    // 设置html的基准值
			    var fontSize = width / 80 + 'px';
			    // 设置给html
			    html.style.fontSize = fontSize;
			}
			setFont();
			// 2、页面改变的时候也需要设置
			// 尺寸改变事件
			window.onresize = function () {
			    setFont();
			}
		})();
	</script>
</head>

<body>
<div class="loading">
    <div class="loadbox">
        <img src="images/loading.gif" alt="">页面加载中...
    </div>
</div>
<div class="bigBox">
	<div class="box-title">
		兴天下视频门禁系统
		<div class="weather">
			<div class="msg">
				<div class="msg-approve" id="approveMsg">审批消息<span class="tip">0</span></div>
				<div class="msg-police" id="policeMsg">报警消息<span class="tip" id="eventSum">0</span></div>
			</div>
            <div class="btn-into" id="inBack">进入后台</div>
		</div>
	</div>
    <div class="viewport">
        <div class="column">
            <div class="overview panel" id="devicePage" style="cursor: pointer;">
                <div class="inner">
                    <div class="item">
                        <h4 id="deviceSum">0</h4>
                        <span>
                            <i class="icon-dot" style="color: #006cff"></i>
                            设备总数  
                        </span>
                    </div>
                   <!-- <div class="item">
                        <h4>190</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            季度新增
                        </span>
                    </div> -->
                    <div class="item">
                        <h4 id="deviceUseNum">0</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            运营设备
                        </span>
                    </div>
                    <div class="item">
                        <h4 id="deviceAbnormalNum">0</h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35"></i>
                            异常设备
                        </span>
                    </div>
                </div>
            </div>
            <!--监控-->
            <div class="monitor panel" id="openDoorPage" style="cursor: pointer;">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">开门记录</a>
                        <a href="javascript:;" data-index="1">异常记录</a>
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col">开门时间</span>
                            <span class="col">设备地址</span>
                            <span class="col">开门方式</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee" id="peopleRecordInout">
                                <!-- <div class="row">
                                    <span class="col">20180701</span>
                                    <span class="col">11北京市昌平西路金燕龙写字楼</span>
                                    <span class="col">1000001</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190704</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000003</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20180701</span>
                                    <span class="col">北京市昌平区建路金燕龙写字楼</span>
                                    <span class="col">1000004</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000005</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000006</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建西路金燕龙写字楼</span>
                                    <span class="col">1000007</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000008</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000009</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190710</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000010</span>
                                    <span class="icon-dot"></span>
                                </div> -->
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="head">
                            <span class="col">异常时间</span>
                            <span class="col">设备地址</span>
                            <span class="col">事件类型</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee" id="deviceEvent">
                                <!-- <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000001</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190703</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190704</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190705</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190706</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190707</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190708</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190709</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190710</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--点位-->
            <div class="point panel">
                <div class="inner" style="padding: 1rem 0.8rem;box-sizing: border-box;">
                    <h3>开门类型</h3>
                    <div class="chart">
						<div style="width: 50%;" id="normalOpenDoor" style="cursor: pointer;">
							<h3 style="text-align: center;" >正常</h3>
							<div class="pie" style="width: 100%;"></div>
						</div> 
						<div style="width: 50%;"  id="deviceEventPage" style="cursor: pointer;">
							<h3 style="text-align: center;">异常报警</h3>
							<div class="pie2" style="width: 100%;height: 10rem;"></div>
						</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 地图 -->
           <div class="map">
                <div class="chart">
                    <!-- <div class="geo"></div> -->
					<div class="total">
					    <div class="data1">
					        <span>人脸</span>
					        <p id="inoutType1">0</p>
					    </div>
					    <div class="data2">
					        <span>刷卡</span>
					        <p id="inoutType4">0</p>
					    </div>
					    <div class="data3">
					        <span>远程</span>
					        <p id="inoutType3">0</p>
					    </div>
					    <div class="data4">
					        <span>蓝牙</span>
					        <p id="inoutType5">0</p>
					    </div>
					    <canvas class="rain"></canvas>
					    <canvas class="dashed"></canvas>
					    <div class="sphere">
					        <div class="sphere-bg"></div>
					        <div class="sum" id="openTimes" style="cursor: pointer;">
					            <span>开门次数</span>
					            <p id="sum">0</p>
					        </div>
					    </div>
					    <div class="cicle3"></div>
					    <div class="cicle4"></div>
					    <div class="cicle5"></div>
					    <div class="cicle6"></div>
					    <div class="cicle7"></div>
					    <div class="cicle8">
					        <span id="percentFace">0%</span>
					        <p>人脸</p>
					    </div>
					    <div class="cicle9">
					        <span id="percentCard">0%</span>
					        <p>刷卡</p>
					    </div>
					    <div class="cicle10">
					        <span id="percentLong">0%</span>
					        <p>远程</p>
					    </div>
					    <div class="cicle11">
					        <span id="percentBlueTooth">0%</span>
					        <p>蓝牙</p>
					    </div>
					</div>
                </div>
            </div>
			<div class="time">
				<div class="time-item">
					<div id="showTime"></div>
				</div>
			</div>
        </div>
        <div class="column">
            <div class="order panel" id="personPage" style="cursor: pointer;">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter">
                        <a href="javascript:;" data-key="day365" class="active">人员统计</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data">
                        <div class="item">
                            <h4 id="peopleSum">62430</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                总人数
                            </span>
                        </div>
                        <div class="item">
                            <h4 id="peopleAddByTodayNum">110</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                今日新增
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 销售额 -->
            <div class="sales panel" id="payPage" style="cursor: pointer;">
                <div class="inner">
                    <div class="caption">
                        <h3>支付统计</h3>
                        <a href="javascript:;" class="active" data-type="month">月</a>
                        <a href="javascript:;" data-type="week">周</a>
                        <a href="javascript:;" data-type="day">日</a>
                    </div>
                    <div class="chart">
                        <div class="label">单位:元</div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
			
		   <!-- 重点人员统计 -->
		  <div class="wrap">
			  <div class="channel panel" id="importantPage" style="cursor: pointer;">
				  <div class="inner">
					  <h3>重点人员统计</h3>
					  <div class="chart" id="personStatic" style="height: calc(100% - 0.8rem)">
					  </div>
				  </div>
			  </div>
		  </div>
		  <!-- 人口年龄统计 -->
		  <div class="top panel">
			  <div class="inner">
				  <h3>人员年龄统计</h3>
				 <div id="ageStatic" style="height:calc(100% - 0.8rem)"></div>
			  </div>
		  </div>
        </div>
    </div>
</div>
</body>
<script src="./js/path.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/echarts-liquidfill.min.js"></script>
<script src="./js/index.js"></script>
</html>